<template>
	<view class="container">
		<view class="menu">
			<uni-segmented-control :current="current" :values="values" @clickItem="onClickItem" styleType="button"
				activeColor="#4cd964"></uni-segmented-control>
		</view>
		<view class="layout">
			<view class="box" v-for="(item,index) in cats" :key="item._id">
				<view class="pic">
					<image :src="item.url" alt="" mode="widthFix" @click="onPreview(index)" lazy-load />
				</view>
				<view class="text">
					{{item.content}}
				</view>
				<view class="author">
					-----{{item.author}}
				</view>
			</view>
		</view>
		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="refreshempty" size="30"></uni-icons>
			</view>
			<view class="item" @click="top">
				<uni-icons type="up" size="30"></uni-icons>
			</view>
		</view>
		<uni-load-more status="more" class="loadmore"></uni-load-more>

	</view>

</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from 'vue';
	import {
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	const current = ref(0)
	const cats = ref([])
	const animals = [{
			key: 'cat',
			value: '猫猫'
		},
		{
			key: 'dog',
			value: '狗狗'
		},
		{
			key: 'all',
			value: '全部'
		},
	]
	const values = computed(() => animals.map(item => item.value))

	const network = async () => {
		await uni.request({
			url: 'https://tea.qingnian8.com/tools/petShow',
			data: {
				size: 10,
				type: animals[current.value].key
			},
			header: {
				"access-key": "xudu@123"
			}
		}).then(res => {
			if (res.data.errCode == 0) {
				console.log(res);
				cats.value = [...cats.value, ...res.data.data]
			} else if (res.data.errCode == 400) {
				uni.showToast({
					title: res.data.errMsg,
					icon: 'none'
				})
			}

		}).catch(err => {
			uni.showToast({
				title: "请求有误",
				icon: 'none'
			})
		}).finally(() => {
			uni.stopPullDownRefresh()
		})
	}
	const onPreview = (index) => {
		let urls = cats.value.map(item => item.url)
		uni.previewImage({
			current: index,
			urls
		})
	}
	// 刷新
	const onRefresh = () => {
		uni.startPullDownRefresh()
	}
	// 返回顶部
	const top = () => {
		uni.pageScrollTo({
			scrollTop: 0
		})
	}
	const onClickItem = (e) => {
		current.value = e.currentIndex
		cats.value = []
		network()
	}
	onMounted(() => {
		network()
	})
	// 触底加载
	onReachBottom(() => {
		network()
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		current.value = 0
		cats.value = []
		network()
	})
</script>

<style lang="scss">
	.container {
		.layout {
			padding: 50rpx;

			.box {
				margin-bottom: 60rpx;

				box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);

				.pic {
					image {
						width: 100%;
					}
				}
			}
		}

		.loadmore {
			padding: calc(env(safe-area-inset-bottom) + 10rpx);
		}

		.float {
			position: fixed;
			right: 30rpx;
			bottom: 80rpx;
			padding: env(safe-area-inset-bottom);

			.item {
				width: 90rpx;
				height: 90rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				display: flex;
				text-align: center;
				justify-content: center;
				margin: 0 0 20rpx;
				align-items: center;
			}
		}
	}
</style>